import React from 'react'
import { Route, Switch, withRouter } from 'react-router-dom';
import { withStyles } from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid'
import Typography from '@material-ui/core/Typography'
import BlogHome from './BlogHome/blogHome'
import BlogDetail from './blogDetail'
import Valine from 'valine';

const styles = (theme) => ({
  commentHint: {
    textAlign: "center",
  },
});

class Blog extends React.Component {
  constructor(props) {
    super(props);
    this.props.onTabChange('blog');   // 更新appbar上的tab状态
    this.state = { blogs: [] };
  }

  componentDidUpdate() {
    let user = this.props.userInfo.user;
    console.log(user)
    if (user) {
      new Valine({
        el: '#comment',
        appId: '',
        appKey: '',
        meta: ['nick', 'mail'],
      });
      let obj = { 'input.vnick': user.nickname, 'input.vmail': user.email };
      for (let key in obj) {
        let t = document.querySelector(key);
        console.log(t)
        let evt = document.createEvent('HTMLEvents');
        evt.initEvent('input', true, true);
        t.value = obj[key];
        t.dispatchEvent(evt);
      };
    }
  }

  render() {
    const { match, classes } = this.props;
    let user = this.props.userInfo.user;
    return (
      <Switch>
        <Route path={`${match.path}/:id`}>
          <BlogDetail
            userInfo={this.props.userInfo}
            headerHeight={this.props.headerHeight} />
          <Grid container>
            <Grid item xs={1} md={2} />
            <Grid item xs={10} md={8}>
              <div id="comment"></div>
              {user ? null : <div><Typography className={classes.commentHint}>请登录后评论！</Typography></div>}
            </Grid>
            <Grid item xs={1} md={2} />
          </Grid>
        </Route>
        <Route path={`${match.path}`}>
          <BlogHome />
        </Route>
      </Switch>
    )
  }
}

export default withRouter(withStyles(styles, { withTheme: true })(Blog));